
<template>
	<view class="">
		 <u-navbar @leftClick="goBack" leftIconColor="#fff" bgColor="transparent" leftText="返回"  :autoBack="false" :fixed="true" :placeholder="false"></u-navbar>
		<view class="" style="position: relative;z-index: 0;overflow: hidden;height: 480rpx;">
			<!-- 背景图 -->
			<image :src="group_info.back_image"
			 mode="aspectFill" style="width: 100%;height: height: 100%;position: absolute;top:0;z-index:-1;"></image>
			 
			<view class="flex padding-sm align-center group-title" v-if="!group_info.is_join">
			 	<image :src="group_info.image"
			 	 mode="aspectFill" style="width: 60rpx;height: 60rpx;border-radius: 30rpx; flex-shrink: 0;"></image>
			 	 <view class="text-bold text-black margin-left-xs text-lg u-line-1 flex-sub">{{ group_info.name }}</view>
				 <text  @click="join()"   class="cu-tag round text-white" style="background-color: #DD275D;padding: 26rpx;">加入</text>
			 </view>
			 
		</view>
		
		<view class="bg-white" style="padding: 40rpx 0rpx;border-radius: 20px 20px 0px 0px;position: relative;top:-40rpx;">
			<view class="" style="padding: 0rpx 30rpx;">
				<view class="u-line-2 text-bold text-black" style="font-size: 20px;" v-if="detail && detail.title">
					{{  detail.title }}
				</view>
				<view class="flex margin-top-lg align-center ">
					<image :src="userinfo.avatar"
					 mode="aspectFill" @click="gozhuye" style="width: 92rpx;height: 92rpx;border-radius: 46rpx; flex-shrink: 0;"></image>
					<view class=" margin-left-xs text-lg u-line-1 flex-sub">
						<view class="text-bold text-black u-line-1 text-df">
							{{ userinfo && userinfo.nickname? userinfo.nickname:'' }}
						</view>
						<view class="text-gray margin-top-xs" style="font-size: 12px;" v-if="detail && detail.create_time">
							{{ detail.create_time }} <text class="padding-left">发布</text>
						</view>
					</view>
					<view v-if=" userinfo.uid !=  userInfo.id ">
						<text class="cu-tag round line-bright" style="padding: 26rpx;" @click="followNew(userinfo.uid, userinfo)" v-if="!userinfo.is_follow">关注</text>
						<text class="cu-tag round line-bright" style="padding: 26rpx;" @click="followNew(userinfo.uid, userinfo)"  v-else>已关注</text>
					</view>
					<view v-if=" userinfo.uid  ==  userInfo.id ">
						<text class="cu-tag round line-bright" style="padding: 26rpx;" @click="deleteTezi()" >删除</text>
					</view>
				</view>
			</view>
			<view class="margin-top-lg bg-white">
				 <view class="text-lg text-black padding" v-if="detail && detail.content">
							{{ detail.content }}
				 </view>
				<!-- <mp-html ref="article" container-style="padding: 0 30rpx;font-size:16px;line-height:25px;" :content="detail.content"
				 	domain="" :editable="false"  /> -->
				<view class="margin-lr">
					<block v-for="(item,index) in filesList" :key="index">
						<block v-if="item.file_class == 1" >
							<image :src="item.url" mode="widthFix" @click="ViewImage" data-url="index" style="width: 100%;"></image>	
						</block>
						<block v-if="item.file_class == 2" >
							<video v-show="item.show" @loadedmetadata="tuiVideometa($event,index,'filesList')" :style="{'width':item.width+'px;','height':item.height+'px;'} "
							 :src="item.url" :show-center-play-btn="true" controls="false" :show-play-btn="false" :show-fullscreen-btn="false" 
								:id="'myVideo'+index" @fullscreenchange="tuiVideoScreenChange($event,'myVideo'+index,'filesList')"
								direction='0' @click="tuiVideoshow('myVideo'+ index,'filesList')"></video>
						</block>
					</block>	
				</view>	
				
				
			</view>
		</view>
		
		<!-- 评论 -->
		<view class="bg-white">
			<view class="padding text-lg text-black text-bold">
				全部评论  {{ detail && detail.comment_num ? detail.comment_num: 0 }}
			</view>
			<!-- 没有内容 -->
			
			<!-- 评论 -->
			<zwz-comment :comments="comments" :famdata="{'relation_id':id,type:2}" @comment-like="commentLike" @send-comment="commentSend({group_id:group_info.group_id})"
				@isLickFun="apiLike('detail')" :showShare="false" v-model="commentText" @lower="lower" @reply="reply"
				@input="handleInput" ref="comment" :is_like="detail.is_like" :like_num="detail.like_num">
			</zwz-comment>
			
			<!-- 没有点赞 评论一下 -->
			<!-- <view class="flex justify-center padding" v-if="!detail.is_like">
				<view class="group-conmmon flex align-center justify-center"  @click="apiLike">
					<u-icon name="thumb-up" size="23"></u-icon>
					<text class="padding-left-xs">点个赞呗</text>
				</view>
			</view>	 -->
		</view>
	</view>
</template>

<script>
	import circle from '@/pagesCircle/libs/mixins/circle.js'
	import video from '@/pagesCircle/libs/mixins/video.js'
	import comment from '@/pagesCircle/libs/mixins/comment.js'
	import mpHtml from '@/pagesCircle/components/mp-html/mp-html'
	import tui from '@/pagesCircle/libs/tui.js'
	export default {
		mixins: [circle,comment,video], // 使用mixin
		data() {
			return {
				id:0,     //小组id
				detail:{}, //帖子详情
				group_info:{}, //小组信息
				userinfo:{},  //用户
				filesList:[], //图片和视频
			}
		},
		components: {
			mpHtml
		},
		onLoad(e) {
			this.id = e.id ||0 //小组did
			this.comments_type =  2;  //comment里面的 评论必须 类型：1动态，2帖子
		},
		onShow(){
			
			this.apipostArticleinfo()
		},
		//设置分享
		onShareAppMessage(res) {

			//来自页面内分享按钮
			return {
				title: `${this.detail.title}`,
				path: '/pagesCircle/group/detail?id=' + this.id
			}
			
		},
		//页面分享朋友圈
		onShareTimeline() {
			return {
				title: `快来参与#${this.detail.title}#吧~`,
				query: 'id=' + this.id
			}
		},
		methods: {
			followNew(user_id,dataObj) {
				if (!this.userInfo.token) {
					this.judgeLogin(() => {});
					return false;
				} 
				let params = {
					uid:user_id,
				}
				 this.$circleApi.follow(params).then(res => {
					if(this.userinfo.is_follow){
						uni.$u.toast('取消关注')
						this.userinfo.is_follow = 0
					}else{
						uni.$u.toast('关注成功')
						this.userinfo.is_follow = 1
					}			
				})
			},
			ViewImage(e) {
				let imgList = this.filesList.map(item =>{
					if(item.file_class == 1){
						return item.url
					}
				 })
				uni.previewImage({
					urls: imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//帖子详情
			apipostArticleinfo(){
				let param={
					article_id:this.id,
				}
				this.$circleApi.postArticleinfo(param).then(res=>{
					this.detail = res
					this.filesList = res.files
					
					this.group_info = res.group_info
					this.userinfo = res.userinfo
				}).catch(err=>{
					
				})
			},
			//返回上一页
			goBack(){
				let canNavBack = getCurrentPages();
				// console.log(canNavBack);
				if(canNavBack && canNavBack.length > 1){
					// console.log('1111');
					uni.navigateBack()
				}else{
					// return;
					//跳到首页
					uni.$u.route({
						url: '/pages/circle/circle',
						type:'switchTab',
						params: {
							name: 'lisa'
						}
					})
				}
			},
			//加入小组
			async join(){
				let group_id = this.group_info.group_id
				let param={
					group_id:group_id,
				}
				//增加邀请好友参数
				let shareFriend =  await uni.getStorageSync("shareFriend"+group_id)
				if(shareFriend){
					param.invite_uid = shareFriend.invite_uid;
					uni.removeStorageSync("shareFriend"+group_id)
				}
				
				this.$circleApi.postJoingroup(param).then(res=>{
			        if(this.group_info.is_join){
			        	uni.$u.toast("退出成功")
			        } else {
			        	uni.$u.toast("加入成功")
			        }
					this.group_info.is_join = !this.group_info.is_join
				}).catch(err => {
					uni.$u.toast("加入失败")
				})
			},
			goMine(){
				uni.$u.route({
					url: '/pagesCircle/group/mine',
					params: {
						id: this.group_info.group_id
					}
				})
			},
			gozhuye(){
				uni.$u.route({
					url: '/pagesCircle/mycircleinfo/mycircleinfo',
					params: {
						id: this.userinfo.uid
					}
				})
			},
			
			//删除帖子
			deleteTezi(){
				let that  =  this
				uni.showModal({
					title: '',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							let param={
								article_id:that.detail.id,
							}
							that.$circleApi.postDelarticle(param).then(res=>{
							   uni.$u.toast("删除成功")
							   let canNavBack = getCurrentPages();
							   //上一页
							   if(canNavBack && canNavBack[canNavBack.length-2] && canNavBack[canNavBack.length-2].route == 'pagesCircle/group/mine'){
								   let $page = canNavBack[canNavBack.length-2]
								   $page.$vm.downCallback();
							   }
							   setTimeout(()=>{
								   uni.$u.route(
									   { 
										 //url:'/pagesCircle/group/mine', 
										 //params: { id:that.group_info.group_id},
										 type:'back'
									   }
								   );
							   },500)
							}).catch(err => {
								uni.$u.toast("失败")
							})
						}
					}
				})
			}
			
		}
	}
	
</script>
<style>

</style>